<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>监管事项清单</title>
    <script src="../../../js/header.js"></script>
    <style>
        html,body,body>div{
            overflow: hidden;
        }
        #unitEntrance{
            margin: 0;
            padding: 0;
        }
        .tab-title{
            font-size: 16px;
            font-weight: bold;
            border-left: 4px solid #0D9AFF;
            font-family: PingFangSC-Medium;
            padding-left:10px;
            margin-bottom: 20px;
        }
        .el-input__inner {
            -webkit-appearance: none;
            background-color: #FFF;
            background-image: none;
            border-radius: 4px;
            border: 1px solid #DCDFE6;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            color: #606266;
            display: inline-block;
            font-size: inherit;
            height: 30px;
            line-height: 30px;
            outline: 0;
            padding: 0 15px;
            -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
            transition: border-color .2s cubic-bezier(.645,.045,.355,1);
        }
    </style>
</head>
<body>
<div id="firstpage" style="overflow: hidden;">
    <el-row type="flex" justify="center" style="margin-top: 25px;">
        <el-col :span="15">
            <el-row :gutter="20">
                <el-col >
                    <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-top: 20px;">
                        <el-breadcrumb-item :to="{ path: '/' }"  @click.native="gobackmain()">首页</el-breadcrumb-item>
                        <el-breadcrumb-item :to="{ path: '/' }"  @click.native="gobackzixun">监管事项清单</el-breadcrumb-item>
                    </el-breadcrumb>
                    <div class="search-tab">
                        <el-tabs v-model="Title" >
                            <el-form :model="selectForm" :rules="rules" ref="selectForm" label-width="150px" style="margin-top: 20px;">
                                <el-row>
                                    <el-col :span="8">
                                        <el-form-item label="监管事项编号:" prop="" label-width="110px">
                                            <el-input v-model="selectForm.supervisionNumber" placeholder=""></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="监管事项名称:" prop="" label-width="150px">
                                            <el-input v-model="selectForm.supervisionName" placeholder=""></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="监管事项子项:" prop="" label-width="150px">
                                            <el-input v-model="selectForm.supervisionSubItem" placeholder=""></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="8">
                                        <el-form-item label="监管部门:" prop="" label-width="110px">
                                            <el-input v-model="selectForm.supervisionDept" placeholder=""></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="对应许可事项名称:" prop="" label-width="150px">
                                            <el-input v-model="selectForm.permitName" placeholder=""></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="对应许可事项类型:" prop="" label-width="150px">
                                            <el-select v-model="selectForm.permitType"  style="width: 100%;">
                                                <el-option
                                                        v-for="item in permitTypeList"
                                                        :key="item.appId"
                                                        :label="item.dictName"
                                                        :value="item.dictName"
                                                ></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <div style="float: right;">
                                        <el-button type="primary" size="small" style="width: 60px;height: 30px;" @click="searchForm()">查询</el-button>
                                        <el-button type="warning" size="small" style="width: 60px;height: 30px;" @click="resetForm()">重置</el-button>
                                    </div>
                                </el-row>
                            </el-form>
                            <el-table :data="tableData"
                                      @selection-change="handleSelectionChange"
                                      max-height="500"
                                      border style="width: 100%; margin-top: 10px;" :header-cell-style="{background:'#eef1f6',color:'#606266'}">
                                <el-table-column type="selection" ></el-table-column>
                                <!--<el-table-column
                                        type="index"
                                        label="序号"
                                        width="50"
                                        align="center">
                                </el-table-column>-->
                                <el-table-column
                                        prop="supervisionNumber"
                                        label="监管事项编号"
                                        width="110"
                                        align="center" >
                                </el-table-column>
                                <el-table-column
                                        prop="supervisionDept"
                                        label="监管部门"
                                        width="150"
                                        align="center" >
                                </el-table-column>
                                <el-table-column
                                        prop="supervisionName"
                                        :show-overflow-tooltip="true"
                                        label="监管事项名称"
                                        width="150"
                                        align="center">
                                </el-table-column>
                                <el-table-column
                                        prop="permitName"
                                        :show-overflow-tooltip="true"
                                        label="对应许可事项名称"
                                            width="150"
                                        align="center">
                                </el-table-column>
                                <el-table-column
                                        prop="permitType"
                                        label="对应许可事项类型"
                                        width="150"
                                        align="center">
                                </el-table-column>
                                <el-table-column
                                        prop="supervisionSubItem"
                                        label="监管事项子项"
                                        :show-overflow-tooltip="true"
                                        width="150"
                                        align="center">
                                </el-table-column>
                                <el-table-column label="操作" align="center" >
                                    <template slot-scope="scope" fixed="right">
                                        <el-button class="look" size="mini" @click="checkContent(scope.$index,scope.row)">查看</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <div style="overflow: hidden;" justify="center">
                                <div class="pagination">
                                    <el-pagination
                                            @size-change="handleSizeChange"
                                            @current-change="handleCurrentChange"
                                            :current-page="currentPage"
                                            :page-sizes="[10, 20, 30, 40]"
                                            :page-size="pagesize"
                                            background
                                            layout="total, sizes,prev, pager, next"
                                            :total="tableTotal"
                                            prev-text="上一页"
                                            next-text="下一页">
                                    </el-pagination>
                                </div>
                            </div>
                            <el-button type="primary" size="mini" @click="appovalExByIds()" style="margin-left: 20px;float: right;">导出</el-button>
                            <el-button type="primary" size="mini" @click="appovalEx()" style="float: right;">批量导出</el-button>

                            <!-- 监管事项清单详情 -->
                            <el-dialog title="" :visible.sync="dialogForm" center fullscreen >
                                <el-row type="flex" justify="center" style="margin-top: 15px;">
                                    <el-col :span="15">
                                        <el-form :model="Detail" :rules="rules" ref="Detail" >
                                            <el-row>
                                                <el-col :span="8" class="tab-title">
                                                    监管事项清单详情
                                                </el-col>
                                            </el-row>
                                            <el-row>
                                                <el-col>
                                                    <el-form-item label="监管事项编号:"  prop="supervisionNumber" label-width="140px"  >
                                                        <el-input v-model="Detail.supervisionNumber"  placeholder="" :disabled="formDisabled"></el-input>
                                                    </el-form-item>
                                                </el-col>
                                            </el-row>
                                            <el-row>
                                                <el-col >
                                                    <el-form-item label="监管事项名称:" prop="supervisionName" label-width="140px" >
                                                        <el-input v-model="Detail.supervisionName"  placeholder="" :disabled="formDisabled"></el-input>
                                                    </el-form-item>
                                                </el-col>
                                            </el-row>
                                            <el-row  >
                                                <el-col :span="12">
                                                    <el-form-item label="对应许可事项名称:" prop="permitName" label-width="140px" >
                                                        <el-input v-model="Detail.permitName"  placeholder="" :disabled="formDisabled"></el-input>
                                                    </el-form-item>
                                                </el-col>
                                                <el-col :span="12">
                                                    <el-form-item label="对应许可事项类型:" prop="permitType"  label-width="140px" >
                                                        <el-select v-model="Detail.permitType" :disabled="formDisabled" style="width: 100%;">
                                                            <el-option
                                                                    v-for="item in permitTypeList"
                                                                    :key="item.appId"
                                                                    :label="item.dictName"
                                                                    :value="item.dictName"
                                                            ></el-option>
                                                        </el-select>
                                                    </el-form-item>
                                                </el-col>
                                            </el-row>
                                            <el-row>
                                                <el-col>
                                                    <el-form-item label="监管事项子项:" prop="supervisionSubItem" label-width="140px"  >
                                                        <el-input v-model="Detail.supervisionSubItem"  placeholder="" :disabled="formDisabled"></el-input>
                                                    </el-form-item>
                                                </el-col>
                                            </el-row>
                                            <el-row>
                                                <el-col >
                                                    <el-form-item label="监管对象:" prop="supervisionObject" label-width="140px" >
                                                        <el-input v-model="Detail.supervisionObject"  placeholder="" :disabled="formDisabled"></el-input>
                                                    </el-form-item>
                                                </el-col>
                                            </el-row>
                                            <el-row>
                                                <el-col>
                                                    <el-form-item label="监管部门:" prop="supervisionDept" label-width="140px" >
                                                        <el-input v-model="Detail.supervisionDept"  placeholder="" :disabled="formDisabled"></el-input>
                                                    </el-form-item>
                                                </el-col>
                                            </el-row>
                                            <el-row>
                                                <el-col :span="12">
                                                    <el-form-item label="监管形式:" prop="supervisionForm" label-width="140px"  >
                                                        <el-select v-model="Detail.supervisionForm ":disabled="formDisabled" style="width: 100%;"  >
                                                            <el-option
                                                                    v-for="item in supervisionFormList"
                                                                    :key="item.appId"
                                                                    :label="item.dictName"
                                                                    :value="item.dictName"
                                                            ></el-option>
                                                        </el-select>
                                                    </el-form-item>
                                                </el-col>
                                                <el-col :span="12">
                                                    <el-form-item label="监管方式:" prop="supervisionWay" label-width="140px" >
                                                        <el-select v-model="Detail.supervisionWay" :disabled="formDisabled" style="width: 100%;">
                                                            <el-option
                                                                    v-for="item in supervisionWayList"
                                                                    :key="item.appId"
                                                                    :label="item.dictName"
                                                                    :value="item.dictName"
                                                            ></el-option>
                                                        </el-select>
                                                    </el-form-item>
                                                </el-col>
                                            </el-row>
                                            <el-row>
                                                <el-col >
                                                    <el-form-item label="监管流程:"  prop="supervisionProcess" label-width="140px" >
                                                        <el-input
                                                                type="textarea"
                                                                :disabled="formDisabled"
                                                                :autosize="{ minRows: 8, maxRows: 8}"
                                                                placeholder=""
                                                                maxlength="500"
                                                                show-word-limit
                                                                v-model="Detail.supervisionProcess">
                                                        </el-input>
                                                    </el-form-item>
                                                </el-col>
                                            </el-row>
                                            <el-row>
                                                <el-col>
                                                    <el-form-item label="监管结果:" prop="supervisionResult" label-width="140px" >
                                                        <el-input
                                                                type="textarea"
                                                                :disabled="formDisabled"
                                                                :autosize="{ minRows: 8, maxRows: 8}"
                                                                placeholder=""
                                                                maxlength="500"
                                                                show-word-limit
                                                                v-model="Detail.supervisionResult">
                                                        </el-input>
                                                    </el-form-item>
                                                </el-col>
                                            </el-row>
                                            <el-row>
                                                <el-col >
                                                    <el-form-item label="监管层级:" prop="supervisionRank" label-width="140px" >
                                                        <el-select v-model="Detail.supervisionRank" multiple   :disabled="formDisabled" style="width: 100%;">
                                                            <el-option
                                                                    v-for="item in supervisionRankList"
                                                                    :key="item.appId"
                                                                    :label="item.dictName"
                                                                    :value="item.dictName"
                                                            ></el-option>
                                                        </el-select>
                                                    </el-form-item>
                                                </el-col>
                                            </el-row>
                                            <el-row>
                                                <el-col >
                                                    <el-form-item label="设定的依据:"  prop="settingBasis" label-width="140px" >
                                                        <el-input
                                                                type="textarea"
                                                                :disabled="formDisabled"
                                                                :autosize="{ minRows: 8, maxRows: 8}"
                                                                placeholder=""
                                                                maxlength="500"
                                                                show-word-limit
                                                                v-model="Detail.settingBasis">
                                                        </el-input>
                                                    </el-form-item>
                                                </el-col>
                                            </el-row>
                                            <el-row>
                                                <el-col :span="24">
                                                    <el-form-item label="对应业务系统链接:" prop="Detail.linkUrl" label-width="140px" >
                                                        <el-link :href="Detail.linkUrl" target="_blank">
                                                            <span style="color:#409EFF">{{this.Detail.linkUrl}}</span>
                                                        </el-link>
                                                    </el-form-item>
                                                </el-col>
                                            </el-row>
                                            <el-row>
                                                <el-col >
                                                    <div style="float:right;">
                                                        <el-button type="info" size="small" style="width: 60px;height: 30px;" @click="dialogForm = false; clearDetail()">关闭</el-button>
                                                    </div>
                                                </el-col>
                                            </el-row>
                                        </el-form>
                                    </el-col>
                                </el-row>
                                </el-dialog>
                        </el-tabs>
                    </div>
                </el-col>
            </el-row>
        </el-col>
    </el-row>
</div>
</body>
<script>
    var firstpage = new Vue({
        el: '#firstpage',
        data() {
            return {
                //
                permitTypeList:[{
                    appId : '0',
                    dictName : '第一类'
                },{
                    appId : '1',
                    dictName : '第二类'
                },{
                    appId : '2',
                    dictName : '第三类'
                },{
                    appId : '3',
                    dictName : '第四类'
                }],
                supervisionFormList:[],
                supervisionWayList:[],
                supervisionRankList:[{
                    appId : '0',
                    dictName : '国家级'
                },{
                    appId : '1',
                    dictName : '省级'
                },{
                    appId : '2',
                    dictName : '市级'
                },{
                    appId : '3',
                    dictName : '县级'
                }],
                dialogForm: false,
                currentPage: 1, //默认显示页面为1
                pagesize: 10, // 每页的数据条数
                tableTotal:'',
                Detail: {
                    id:'',
                    supervisionNumber:'',
                    supervisionName:'',
                    permitName:'',
                    permitType:'',
                    supervisionSubItem:'',
                    supervisionObject:'',
                    supervisionForm:'',
                    supervisionWay:'',
                    supervisionProcess:'',
                    supervisionResult:'',
                    supervisionRank:'',
                    settingBasis:'',
                    supervisionDept:'',
                    linkUrl:'http://192.168.43.159:8086/fxyj/index.html'

                },
                selectForm: {
                    supervisionNumber:'',
                    supervisionName : '',
                    supervisionSubItem : '',
                    supervisionDept : '',
                    permitName : '',
                    permitType : ''
                },
                formDisabled: false,
                showbutton:false,
                flag:'',
                currentRow: null,
                tableData: [],
                showOnSubmit: true,
                showOnReplace: false,
                exportList : []
            }
        },
      created(){
            /!* 监管形式 *!/
            axios.post('/dzjportal/dict/getdict/d_supervisionFormList').then(res => {
                    this.supervisionFormList = res.data.data.result;
            }).catch(e => {
                this.$message.error("网络连接超时");
            });
            /!* 监管方式 *!/
            axios.post('/dzjportal/dict/getdict/d_supervisionWayList').then(res => {
                this.supervisionWayList = res.data.data.result;
                 console.log(this.orgList)
            }).catch(e => {
                this.$message.error("网络连接超时");
            });
         },
        mounted(){
            this.getData();
        },
        methods: {
            getData() {
                axios({
                    method: 'get',
                    url: '/dzjportal/supervision/wtlistPage',
                    params: {
                        pageSize: this.pagesize,
                        pageNo: this.currentPage,
                        supervisionNumber : this.selectForm.supervisionNumber,
                        supervisionName : this.selectForm.supervisionName,
                        supervisionSubItem : this.selectForm.supervisionSubItem,
                        supervisionDept : this.selectForm.supervisionDept,
                        permitName : this.selectForm.permitName,
                        permitType : this.selectForm.permitType
                    }
                })
                    .then(response => {
                    let data = response.data;
                if (data.code == 200) {
                    console.log(data.data.results)
                    let dataInformation = data.data.results;
                    this.tableTotal = data.data.total;// 数据长度
                    this.tableData = dataInformation;
                } else {
                    this.$message.error(data.msg);
                }
            })
            .catch(function (error) {
                    console.log(error);
                });
            },
            /* 列表页搜索 */
            searchForm() {
                axios({
                    method: 'get',
                    url: '/dzjportal/supervision/wtlistPage',
                    params: {
                        pageSize: this.pagesize,
                        pageNo: 1,
                        supervisionNumber : this.selectForm.supervisionNumber,
                        supervisionName : this.selectForm.supervisionName,
                        supervisionSubItem : this.selectForm.supervisionSubItem,
                        supervisionDept : this.selectForm.supervisionDept,
                        permitName : this.selectForm.permitName,
                        permitType : this.selectForm.permitType
                    }
                })
                    .then(response => {
                        let data = response.data;
                        if (data.code == 200) {
                            console.log(data.data.results)
                            let dataInformation = data.data.results;
                            this.tableTotal = data.data.total;// 数据长度
                            this.tableData = dataInformation;
                        } else {
                            this.$message.error(data.msg);
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            // 查看
            checkContent(index,row){
                this.dialogForm = true;
                this.showInformation(index,row);
                this.checkDisabled(true);
            },
            gobackmain(){
                parent.mainwork.backIndex();
            },
            clearDetail() {
                this.Detail.Id = '';
                this.Detail.supervisionNumber='';
                this.Detail.supervisionName='';
                this.Detail.permitName='';
                this.Detail.permitType='';
                this.Detail.supervisionSubItem='';
                this.Detail.supervisionObject='';
                this.Detail.supervisionForm='';
                this.Detail.supervisionWay='';
                this.Detail.supervisionProcess='';
                this.Detail.supervisionResult='';
                this.Detail.supervisionRank='';
                this.Detail.settingBasis='';
                this.Detail.isPublic='';
                this.Detail.publicLocation='';
                this.Detail.supervisionDept='';
                this.Detail.linkUrl=''
            },
            // 设置允许填写和不允许填写
            checkDisabled(n) {
                if (n) {
                    this.formDisabled = true;
                } else {
                    this.formDisabled = false;
                }
            },
            /* 列表页重置 */
            resetForm() {
                this.selectForm.currentPage = 1; //默认显示页面为1
                this.selectForm.pagesize = 10; // 每页的数据条数
                this.selectForm.supervisionNumber='';
                this.selectForm.supervisionName='';
                this.selectForm.supervisionSubItem = '';
                this.selectForm.supervisionDept = '';
                this.selectForm.permitName = '';
                this.selectForm.permitType = '';
                this.getData();
            },
            /* 单选搜索表单 */
            selectCurrentChange(val){
                this.currentRow = val;
            },
            //每页下拉显示数据
            handleSizeChange(size) {
                this.pagesize = size;
                this.getData();
            },
            //点击第几页
            handleCurrentChange(currentPage) {
                this.currentPage = currentPage;
                this.getData();
            },
            // 公共方法--查看
            showInformation(index,row){
                axios({
                    method: 'get',
                    url: '/dzjportal/supervision/queryById',
                    params:{
                        id: row.id
                    }
                })
                    .then(response => {
                    console.log(response.data);
                if (response.data.code == 200) {
                    debugger;
                    this.Detail = response.data.data;
                    if(this.Detail.supervisionRank.length !=""){
                        this.flag=this.Detail.supervisionRank.split(",");
                        this.Detail.supervisionRank=this.flag;
                    }
                } else {
                    this.$message.error(data.msg);
                }
            }).catch(function (error) {
                    console.log(error);
                });
            },
            //批量导出
            appovalEx(){
                this.$confirm('确定要批量导出吗?', '提示', {
                    cancelButtonText: '取消',
                    confirmButtonText: '确定',
                    type: 'warning'
                }).then(() => {
                    window.location.href="/dzjportal/supervision/export?supervisionNumber="+this.selectForm.supervisionNumber+"&supervisionName="
                        +this.selectForm.supervisionName+"&supervisionSubItem="
                        +this.selectForm.supervisionSubItem+"&supervisionDept="
                        +this.selectForm.supervisionDept+"&permitName="
                        +this.selectForm.permitName+"&permitType="
                        +this.selectForm.permitType;
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消导出'
                    });
                });
            },
            handleSelectionChange(val) {
                this.exportList = val;
            },
            //导出
            appovalExByIds(){
                debugger;
                if(this.exportList.length >0){
                    this.ids = this.exportList.map(function(exportList,index){
                        return exportList.id;
                    }).join(",");
                    this.$confirm('确定要导出所选数据吗?', '提示', {
                        cancelButtonText: '取消',
                        confirmButtonText: '确定',
                        type: 'warning'
                    }).then(() => {
                        window.location.href="/dzjportal/supervision/exportByIds?ids="+this.ids
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '取消导出'
                        });
                    });
                }else {
                    this.$message('请选择要导出的数据！');
                }
            },
        }
    })
</script>
</html>